<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <link href="css/example.css" rel="stylesheet">
	<style type="text/css">
        body{
            margin: 0;overflow: hidden;
        }
		.play{
			width:820px;height: 550px;float: left;position:absolute;
		}
		.video{
			width:100%;height:100%;
		}
		.load{
			width:100%;height:100%;position:absolute;top:0;background: lightblue;background-image: url('css/load.gif');background-repeat:no-repeat;background-position: center;
		}
		.playbtn{
			margin-top: 50px;margin-left: 20px;width: 180px;float: left;display:none;
		}
	</style>
</head>

<body>
    <div class="d-flex align-items-stretch flex-row play">
        <div class="player-room flex-grow-1 video"></div>
        <div class="load">
		</div>
    </div>
    <div class="playbtn">
        <button id="btnplay" onclick="playVideo()">播放</button>
        <div class="info-tips">
		</div>
    </div>
    <script src="js/adapter.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/litong-video-player.js"></script>
    <script type="text/javascript">
        let currentPlayer = undefined;
		
        function playVideo() {
            var id = getQueryParam("id");
            var name = getQueryParam("name");
            var node = { type: 2, element_id: id, alias: name };
            //type===2 表示是摄象机节点
            if (node.type === 2 && node.element_id) {
                //关闭上一次播放的视频
                if (currentPlayer) {
                    currentPlayer.destroy();
                    currentPlayer = undefined;
                }

                //为了降低访问带宽，我们在测试程序里尽量使用子码流。
                let player = LitongVideoPlayer.createPlayer(node.element_id, 1);
                player.on('play', () => {
					$('.load').hide();
                });
                $('.player-room').empty().append(player.dom);
                currentPlayer = player;
            }
        }
		
		function setSize(){
            var v_width = getQueryParam("width");
            var v_height = getQueryParam("height");
			if(v_width){
				$('.play').width(v_width);
			}
			if(v_height){
				$('.play').height(v_height);
			}
		}

        function getQueryParam(param) {
            var url = location.href; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {
                var str = url.split("?")[1];
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    var s = strs[i].split("=");
                    if (s[0] == param) {
                        return s[1];
                    }
                }
            }
            return "";
        }
		
        $(async function () {
			setSize();
            var baseurl=getQueryParam("baseurl");
            baseurl=baseurl.split("http://")[1];
            var deviceurl=getQueryParam("deviceurl");
            console.log("baseurl="+baseurl);
            console.log("deviceurl="+deviceurl);
            //测试使用
            //baseurl="aqscjcyjpt.shouyouxinjiang.cn";
            //deviceurl="45.251.21.74";
            LitongVideoPlayer.init(`ws://${baseurl}/ws/signalling`,deviceurl); 
            //自动播放
            var previewMask = document.getElementById('btnplay');
            previewMask.onclick();
        });
    </script>

</html>